{include file="public/header" $title="主页" /}
    <style>
        .my-total-unit{float: right;line-height: 43px}
        .my-total-num{font-size: 30px}
        .my-total-all-box{margin-top: 10px}
        .my-total-speed-line{margin-top: 20px}
    </style>
</head>
<body>
<!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
<!--[if lt IE 9]>
<script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
<script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->


<div style="width: 96%;margin: 0 auto">
    <div class="layui-row layui-col-space30">
        <div class="layui-col-md3">
            <div style="padding: 5px; background-color: #F2F2F2;">
                <div class="layui-row layui-col-space1">
                    <div class="layui-card">
                        <div class="layui-card-header">
                            <span>访问量</span>
                            <div class="my-total-unit">
                                <span class="layui-badge layui-bg-green " >月</span>
                            </div>
                        </div>
                        <div class="layui-card-body">
                            <h3 class="my-total-num">5221</h3>
                            <div class="my-total-all-box">
                                <span>总访问量：</span>
                                <span>5255</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-col-md3">
            <div style="padding: 5px; background-color: #F2F2F2;">
                <div class="layui-row layui-col-space1">
                    <div class="layui-card">
                        <div class="layui-card-header">
                            <span>今日注册</span>
                            <div class="my-total-unit">
                                <span class="layui-badge layui-bg-green " >月</span>
                            </div>
                        </div>
                        <div class="layui-card-body">
                            <h3 class="my-total-num">5221</h3>
                            <div class="my-total-all-box">
                                <span>总注册：</span>
                                <span>5255</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-col-md3">
            <div style="padding: 5px; background-color: #F2F2F2;">
                <div class="layui-row layui-col-space1">
                    <div class="layui-card">
                        <div class="layui-card-header">
                            <span>活跃用户</span>
                            <div class="my-total-unit">
                                <span class="layui-badge layui-bg-green " >天</span>
                            </div>
                        </div>
                        <div class="layui-card-body">
                            <h3 class="my-total-num">5221</h3>
                            <div class="my-total-all-box">
                                <span>本周：</span>
                                <span>5255</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-col-md3">
            <div style="padding: 5px; background-color: #F2F2F2;">
                <div class="layui-row layui-col-space1">
                    <div class="layui-card">
                        <div class="layui-card-header">
                            <span>下载量</span>
                            <div class="my-total-unit">
                                <span class="layui-badge layui-bg-green " >周</span>
                            </div>
                        </div>
                        <div class="layui-card-body">
                            <h3 class="my-total-num">5221</h3>
                            <div class="my-total-all-box">
                                <span>总下载量：</span>
                                <span>5255</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>

    <div class="layui-row layui-col-space30">
        <div class="layui-col-md7">
            <div style="padding: 5px; background-color: #F2F2F2;">
                <div class="layui-row layui-col-space1">
                    <div class="layui-card">
                        <div class="layui-card-header">
                            <span>访问量</span>
                        </div>
                        <div class="layui-card-body">
                            <div id="echarts-lines-visit" style="height:400px;"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-col-md5">
            <div class="grid-demo"><div style="padding: 5px; background-color: #F2F2F2;">
                <div class="layui-row layui-col-space1">
                    <div class="layui-card">
                        <div class="layui-card-header">
                            <span>访问增比</span>
                        </div>
                        <div class="layui-card-body" style="height: 400px;">
                            <div class="my-total-speed-line">
                                <h3>本周访问量</h3>
                                <p>同比增长（负数为下跌）</p>
                                <div class="layui-progress layui-progress-big " lay-showPercent="true">
                                    <div class="layui-progress-bar layui-bg-green" lay-percent="31%"></div>
                                </div>
                            </div>
                            <div class="my-total-speed-line">
                                <h3>本周注册量</h3>
                                <p>同比增长（负数为下跌）</p>
                                <div class="layui-progress layui-progress-big " lay-showPercent="true">
                                    <div class="layui-progress-bar layui-bg-orange" lay-percent="80%"></div>
                                </div>
                            </div>
                            <div class="my-total-speed-line">
                                <h3>本周下载量</h3>
                                <p>同比增长（负数为下跌）</p>
                                <div class="layui-progress layui-progress-big " lay-showPercent="true">
                                    <div class="layui-progress-bar layui-bg-red" lay-percent="3%"></div>
                                </div>
                            </div>
                            <div class="my-total-speed-line">
                                <h3>本周活跃度</h3>
                                <p>同比增长（负数为下跌）</p>
                                <div class="layui-progress layui-progress-big " lay-showPercent="true">
                                    <div class="layui-progress-bar" lay-percent="20%"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            </div>
        </div>
    </div>
</div>



<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例

    var myChartVisit = echarts.init(document.getElementById('echarts-lines-visit'));

    /*访问量折线图*/
    var optionVisit = {
        title: {
            text: '访问量/注册量/下载量/活跃用户'
        },
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data:['访问量','注册量','下载量','活跃用户']
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        toolbox: {
            feature: {
                saveAsImage: {}
            }
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['周一','周二','周三','周四','周五','周六','周日']
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                name:'访问量',
                type:'line',
                stack: '总量',
                data:[120, 132, 101, 134, 90, 230, 210]
            },
            {
                name:'注册量',
                type:'line',
                stack: '总量',
                data:[220, 182, 191, 234, 290, 330, 310]
            },
            {
                name:'下载量',
                type:'line',
                stack: '总量',
                data:[150, 232, 201, 154, 190, 330, 410]
            },
            {
                name:'活跃用户',
                type:'line',
                stack: '总量',
                data:[320, 332, 301, 334, 390, 330, 320]
            },
        ]
    }

    // 使用刚指定的配置项和数据显示图表。
    myChartVisit.setOption(optionVisit);
</script>

</body>
<script>
    layui.use(['element'],function(){

    });

</script>
</html>